<template>
    <div class="home-classic">
        <h1>经典歌单</h1>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item,index) in listData" :key="index">
                    <div class="cover">
                    <van-image :src="item.cover_url_medium"  radius="10"/>
                    <span>{{ item.access_num | numFilter(2) }}万</span>
                </div>
                <span>{{ item.title }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// import BScroll from 'better-scroll';
import { betterScrollHorizontal } from '@/common/better-scroll';
export default{
 data(){
    return{
        listData:[],
        pageNo: 1
    }
 },
 created(){
    this.getData(59,this.pageNo,20);
 },

 methods:{
    getData(id,pageNo,pageSize){
        this.$request('get','/recommend/playlist',{
            id,
            pageNo,
            pageSize,
        }).then((res)=>{
            console.log(res);
            if(res.result == 100){
                this.listData = res.data.list;
            }
            // this.betterScrollHorizontal(this.listData.length, 10);
       
        betterScrollHorizontal(
                this,
                this.$refs.wrapper,
                this.$refs.content,
                this.listData.length,
                10
            );
        });
  },
// filters:{
//     numFilter(value,num){
//         return parseFloat(value/10000).toFixed(num)
//     }
//   }
 }
};
</script>

<style scoped>
 .cover{
    position: relative;
}
.cover > span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    /* font-size: 14px;
    border-radius: 1rem; */
    width: 5rem;
    border-radius: 1rem;
    /* display: inline-block; */
}

.wrapper {
    overflow: hidden;
    width: 100%;

    /* white-space: nowrap; */
}

ul.content > li{
    width: 10rem;
    display: inline-block;
    vertical-align: top;
}
ul.content > li *{
     margin: 0 0.1rem;
}
ul.content li>span{
    font-size: 0.8rem;
    color:#625858;
}
</style>